<script setup>
import { onMounted, ref } from "vue";
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import Compressor from "compressorjs";
import { dateFormat } from "@/utils/libs";
import { checkSession } from "@/store/cache";
import { useRouter } from "vue-router";

const user = ref({
  vip: false,
  username: '演示数据',
  nickname: '演示数据',
  avatar: "/images/menu/member.png",
  mobile: "演示数据",
  power: 99999,
})

const vipImg = ref("/images/menu/member.png");
const router = useRouter()
const emits = defineEmits(['hide'])
onMounted(() => {
  checkSession().then(() => {
    // 获取最新的用户消息
    httpGet('api/user/profile').then(res => {
      user.value = res.data
    }).catch(e => {
      ElMessage.error('获取用户信息失败：'+e.message)
    })
  })
})

const afterRead = (file) => {
  // 压缩图片并上传
  new Compressor(file.file,{
    quality: 0.6,
    success(result) {
      const formData = new FormData()
      formData.append('file',result,result.name)
      // 执行上传操作
      httpPost('api/file/upload',formData).then(res => {
        user.value.avatar = res.data.url
        ElMessage.success({ message: "上传成功", duration: 500 });
      }).catch(e => {
        ElMessage.error('图片上传失败：'+e.message)
      })
    },
    error(error) {
      ElMessage.error('图片压缩上传失败：'+error.message)
    }
  })
}

const update = () => {
  httpPost('api/user/profile_update',user.value).then(() => {
    ElMessage.success({ message: "更新成功", duration: 500 });
  }).catch((e) => {
    ElMessage.error("更新失败：" + e.message);
  });
}

const gotoLog = () => {
  router.push('/powerLog')
  emits('hide',false)
}

</script>
<template>
  <div class="user-info flex-center-col" id="user-info">
    <el-form :model="user" label-width="80px" label-position="left">
      <el-row>
        <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" :http-request="afterRead" accept=".png,.jpg,.jpeg,.bmp">
          <el-tooltip content="点击上传头像" placement="top" v-if="user.avatar">
            <el-avatar :src="user.avatar" shape="circle" :size="100"/>
          </el-tooltip>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-row>
      <el-form-item label="昵称">
        <el-input v-model="user['nickname']"/>
      </el-form-item>
      <el-form-item label="账号">
        <div class="flex">
          <span>{{user.username}}</span>
          <el-tooltip class="box-item" content="您已经是 VIP 会员" placement="right">
            <span class="vip-icon"><el-image v-if="user.vip" :src="vipImg" class="rounded-full ml-1 size-5"/></span>
          </el-tooltip>
        </div>
      </el-form-item>
      <el-form-item label="剩余算力">
        <el-text type="warning">{{user['power']}}</el-text>
        <el-tag type="info" size="small" class="ml-2 cursor-pointer" @click="gotoLog">算力日志</el-tag>
      </el-form-item>
      <el-form-item label="会员到期时间" v-if="user['expired_time'] > 0">
        <el-tag type="danger">{{ dateFormat(user["expired_time"]) }}</el-tag>
      </el-form-item>
      <el-row class="opt-line">
        <el-button :dark="false" type="primary" @click="update">保存</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<style lang="stylus" scoped>
.user-info {

  .el-row {
    justify-content center
    margin-bottom 10px
  }

  .vip-icon {
    position relative
    top 5px
  }

  .opt-line {

    .el-button {
      width 100%
    }
  }
}
</style>